<template>
    <div>
        <h1>百度地图</h1>
        <input type="text" v-model.lazy="keyword">
        <div id="map" ref="map">

        </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            map:null,
            point:null,
            keyword:"",
            local:null,
        }
    },
    mounted(){
        this.map=new window.BMapGL.Map(this.$refs.map);
        this.point=new window.BMapGL.Point(113.665,34.784);
        this.map.centerAndZoom(this.point, 15);       
        this.map.enableScrollWheelZoom(true);
        this.marker = new window.BMapGL.Marker(this.point);
        this.map.addOverlay(this.marker);
        this.local=new window.BMapGL.LocalSearch(this.map,{
            renderOptions:{map: this.map}
        })
    },
    watch:{
        keyword:{
            handler(){
                if(this.keyword===""){
                    this.local.clearResults()
                    this.map.centerAndZoom(this.point,15)
                }else{
                    this.local.search(this.keyword)
                }
            }
        }
    }
}
</script>
<style >
#map{
    width: 100%;
    height: 80vh;
}
</style>
